<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue组件参数传递prop</title>
  </head>
  <body>
    <div id="app">
      {{msg}}
      <button @click="updateImg">修改图片</button>
      <button @click="updateUserName">修改用户名</button>
      <welcome :imgurl="imgurl" :user-name="userName"></welcome>
    </div>
    <!-- 欢迎组件 -->
    <template id="welcome">
      <div>
        <div>
          <img :src="imgurl" alt="" width="200px" height="200px" />
        </div>
        <div>欢迎光临：{{userName}}</div>
      </div>
    </template>
  </body>
</html>
<script type="module">
  import {} from "./js/vue.js";
  //欢迎组件
  let welcome = {
    template: "#welcome",
    props: {
      imgurl: String,
      userName: String,
    },
  };
  let app = new Vue({
    el: "#app",
    data: {
      msg: "vue组件参数传递prop",
      imgurl: "./imgs/logo (2).png",
      userName: "李四",
    },
    methods: {
      updateImg() {
        this.imgurl = "./imgs/default-avatar.png";
      },
      updateUserName() {
        this.userName = "王五";
      },
    },

    components: {
      welcome,
    },
  });
</script>
